<template>
  <div class="map-right">
    <div class="map-right-title">
      <img src="../../assets/screen/detail.png" />
    </div>

    <div class="map-right-asset">
      <div
        v-for="(item, index) in classificationList"
        :key="index"
        :class="[activeIndex === index ? 'active asset-item' : 'asset-item']"
        @click="itemClick(item, index)"
      >
        {{ item.propertyTypeName }}
      </div>
    </div>
    <div class="map-right-content">
      <div class="big-title">
        <img src="../../assets/screen/tips.png" />
        <div>
          <div style="width: 100%; margin-bottom: 15px; color: #fff">
            资产地块名称：<span
              v-if="propertyInfo && propertyInfo.propertyName"
            >
              {{ propertyInfo && propertyInfo.propertyName }}
            </span>
          </div>
          <div style="width: 100%; color: #fff">
            资产地块编号：<span
              v-if="propertyInfo && propertyInfo.propertyCode"
            >
              {{ propertyInfo && propertyInfo.propertyCode }}
            </span>
          </div>
        </div>
      </div>
      <div class="swiper">
        <el-carousel height="150px">
          <el-carousel-item
            v-for="item in propertyInfo &&
            propertyInfo.realisticPictureAttachList"
            :key="item.attId"
          >
            <img
              :src="item.attUrl"
              style="width: 100%; height: 100%"
              @click="imgClick(item.attUrl)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div
        class="detail"
        v-if="
          propertyTypeCode === 'property_type_shangpu' ||
          propertyTypeCode === 'property_type_gongyu' ||
          propertyTypeCode === 'property_type_bangong' ||
          propertyTypeCode === 'property_type_zongheti' ||
          propertyTypeCode === 'property_type_gongyechangfang'
        "
      >
        <div class="swiper-info">
          <div
            class="swiper-info-item"
            v-if="
              propertyTypeCode === 'property_type_shangpu' ||
              propertyTypeCode === 'property_type_bangong' ||
              propertyTypeCode === 'property_type_zongheti' ||
              propertyTypeCode === 'property_type_gongyechangfang'
            "
          >
            <dl>
              <dt v-if="propertyInfo && propertyInfo.buildingAreaTotal">
                {{ propertyInfo && propertyInfo.buildingAreaTotal }}㎡
              </dt>
              <dt v-else>0㎡</dt>
              <dd>总量</dd>
            </dl>
          </div>
          <div
            class="swiper-info-item"
            v-else-if="
              propertyInfo &&
              propertyInfo.propertyTypeCode === 'property_type_gongyu'
            "
          >
            <dl>
              <dt>
                {{
                  (propertyInfo && propertyInfo.averageAssessValueAmount) || 120
                }}
              </dt>
              <dd>总间数</dd>
            </dl>
          </div>

          <div
            class="swiper-info-item"
            v-if="propertyTypeCode == 'property_type_gongyu'"
          >
            <dl>
              <div
                ref="categoryStackchart"
                class="chart"
                style="width: 280px; height: 240px"
              />
              <dd>使用占比{{ propertyInfo.propertyTypeCode }}</dd>
            </dl>
          </div>

          <div
            class="swiper-info-item"
            v-if="propertyTypeCode !== 'property_type_gongyu'"
          >
            <dl>
              <div
                ref="buildPiechart"
                class="chart"
                style="width: 280px; height: 140px"
                v-show="
                  propertyInfo.buildingAreaTotal && propertyInfo.freeAreaTotal
                "
              />
              <dd>使用占比</dd>
            </dl>
          </div>

          <div class="swiper-info-item">
            <dl>
              <dt style="padding-bottom: 10px">
                {{ propertyInfo && propertyInfo.manageDeptName }}
              </dt>
              <dd>管理单位</dd>
            </dl>
          </div>
        </div>
      </div>

      <div class="detail" v-else>
        <div class="swiper-info">
          <div class="swiper-info-item">
            <dl>
              <dt>{{ propertyInfo && propertyInfo.propertyOwner }}</dt>
              <dd>产权人</dd>
            </dl>
          </div>
          <div class="swiper-info-item">
            <dl>
              <dt>{{ propertyInfo && propertyInfo.ownershipName }}</dt>
              <dd>权属</dd>
            </dl>
          </div>
          <div class="swiper-info-item">
            <dl>
              <dt>{{ propertyInfo && propertyInfo.propertyCommunityName }}</dt>
              <dd>所属社区</dd>
            </dl>
          </div>
          <div class="swiper-info-item">
            <dl>
              <dt v-if="propertyInfo && propertyInfo.propertyAncestralLandArea">
                {{ propertyInfo && propertyInfo.propertyAncestralLandArea }}㎡
              </dt>
              <dt v-else>0㎡</dt>
              <dd>宗地面积</dd>
            </dl>
          </div>
          <div class="swiper-info-item">
            <dl>
              <dt>{{ propertyInfo && propertyInfo.propertyTypeName }}</dt>
              <dd>土地性质</dd>
            </dl>
          </div>
          <div class="swiper-info-item">
            <dl>
              <dt>{{ propertyInfo && propertyInfo.propertyLocation }}</dt>
              <dd>地址</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="list-table" v-if="activeIndex !== 0">
        <el-table
          :data="propertyInfo.punitList"
          style="width: 100%"
          height="250"
        >
          <el-table-column label="序号" width="45">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="门牌号/栋号" width="80">
            <template slot-scope="scope">
              <span v-if="propertyTypeCode === 'property_type_gongyu'">{{
                scope.row.dongCode
              }}</span>
              <span v-else>{{ scope.row.doorCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="buildingAreaTotal"
            label="建筑面积(㎡)"
            width="90"
          >
          </el-table-column>
          <el-table-column
            prop="freeAreaTotal"
            label="可租面积(㎡)"
            width="90"
          >
          </el-table-column>
          <!-- <el-table-column prop="punitStatus" label="租赁状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.punitStatus === 0">空置</span>
              <span v-else-if="scope.row.punitStatus === 1">有偿租赁</span>
              <span v-else-if="scope.row.punitStatus === 2">无偿租赁</span>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  innerScreenPropertyType,
  innerScreenPropertyInfo,
  innerScreenRightPropertyType,
} from "@/api/screen";

export default {
  data() {
    return {
      propertyId: undefined,
      propertyTypeCode: "",
      propertyInfo: {
        propertyTypeCode: "property_type_shangpu",
        imageAttachList: [
          {
            attId: 1,
            attUrl: require("../../assets/screen/hlc.jpg"),
          },
        ],
      },
      imgDialogVisible: false,
      curUrl: "",
      chartPie: null,
      gyCategoryStackChart: null,
      activeIndex: 0,
      classificationList: [],
    };
  },
  mounted() {
    // 获取当前资产类型
    this.$bus.$on("setAllProperty", (res) => {
      console.log("这边展示", res);
      // this.classificationList = [];
      // 默认是全部
      // if (res === "all") {
      //   this.getInnerPropertyType();
      // } else if (res === "property_type_shangpu") {
      //   this.classificationList = [
      //     {
      //       propertyTypeName: "地块信息",
      //       propertyTypeCode: "0",
      //     },
      //     {
      //       propertyTypeName: "商铺",
      //       propertyTypeCode: "property_type_shangpu",
      //     },
      //   ];
      // } else if (res === "property_type_gongyu") {
      //   this.classificationList = [
      //     {
      //       propertyTypeName: "地块信息",
      //       propertyTypeCode: "0",
      //     },
      //     {
      //       propertyTypeName: "公寓",
      //       propertyTypeCode: "property_type_gongyu",
      //     },
      //   ];
      // } else if (res === "property_type_bangong") {
      //   this.classificationList = [
      //     {
      //       propertyTypeName: "地块信息",
      //       propertyTypeCode: "0",
      //     },
      //     {
      //       propertyTypeName: "办公",
      //       propertyTypeCode: "property_type_bangong",
      //     },
      //   ];
      // } else if (res === "property_type_zongheti") {
      //   this.classificationList = [
      //     {
      //       propertyTypeName: "地块信息",
      //       propertyTypeCode: "0",
      //     },
      //     {
      //       propertyTypeName: "综合体",
      //       propertyTypeCode: "property_type_zongheti",
      //     },
      //   ];
      // } else if (res === "property_type_gongyechangfang") {
      //   this.classificationList = [
      //     {
      //       propertyTypeName: "地块信息",
      //       propertyTypeCode: "0",
      //     },
      //     {
      //       propertyTypeName: "工业厂房",
      //       propertyTypeCode: "property_type_gongyechangfang",
      //     },
      //   ];
      // }
    });

    this.$bus.$on("getProInfoEvent", (mes) => {
      this.activeIndex = 0;
      this.propertyTypeCode = mes && mes.propertyTypeCode;
      this.propertyId = mes && mes.propertyId;
      // 点击地块信息
      this.getInnerScreenPropertyInfo();

      this.getinnerScreenRightPropertyType();
    });
  },
  methods: {
    imgClick(url) {
      this.$emit("getImgInfo", {
        imgFlag: true,
        curUrl: url,
      });
    },
    getinnerScreenRightPropertyType() {
      let params = {
        propertyId: this.propertyId,
      };
      innerScreenRightPropertyType(params).then((res) => {
        if (res.code === 200) {
          this.classificationList = res.data;
          this.classificationList.unshift({
            propertyTypeName: "地块信息",
            propertyTypeCode: "0",
          });

          console.log("资产类型", this.classificationList);
        }
      });
    },
    itemClick(item, index) {
      this.activeIndex = index;
      this.propertyTypeCode = item && item.propertyTypeCode;

      this.getInnerScreenPropertyInfo();
    },
    getInnerScreenPropertyInfo() {
      let params = {
        propertyTypeCode: this.propertyTypeCode,
        propertyId: this.propertyId,
      };
      innerScreenPropertyInfo(params).then((res) => {
        if (res.code == 200) {
          this.propertyInfo = res.data;
          if (this.propertyTypeCode === "property_type_gongyu") {
            this.$nextTick(() => {
              this.initcategoryStackchart();
            });
          } else {
            this.$nextTick(() => {
              this.initBuildPieChart();
            });
          }
        }
      });
    },
    initBuildPieChart() {
      let data = [
        {
          value: (
            this.propertyInfo &&
            this.propertyInfo.buildingAreaTotal -
              this.propertyInfo.freeAreaTotal
          ).toFixed(2),
          name: "已使用",
          itemStyle: { color: "#376DF7" },
        },
        {
          value: Number(this.propertyInfo.freeAreaTotal).toFixed(2),
          name: "未使用",
          itemStyle: { color: "#53B997" },
        },
      ];
      console.log("data", data);
      this.chartPie = this.$echarts.init(this.$refs.buildPiechart);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          top: "center",
          right: "10",
          orient: "vertical",
          show: true,
          itemWidth: 6, // 标签宽度为20px
          itemHeight: 6, // 标签高度为10px
          formatter: (name) => {
            let target = data.filter((v) => v.name == name);
            let sum = data.reduce((pre, next) => pre.value + next.value);
            let value = target[0].value;
            console.log(sum, value);
            let per = (
              (Number(value) / Number(this.propertyInfo.buildingAreaTotal)) *
              100
            ).toFixed(2);
            return `${name} : ${per}%`;
          },
        },
        series: [
          {
            name: "使用占比图表",
            type: "pie",
            radius: ["45%", "75%"],
            center: ["25%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "outside",
              formatter: `{b}:{d}%`,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
              normal: {
                length: 10, //第一条线
                length2: 10, //第二条线
                lineStyle: {
                  width: 1, // 线条的宽度
                  // color: "#000", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },
            data: data,
          },
        ],
      };
      this.chartPie.setOption(option);
    },

    // 公寓 资产利用情况统计图表
    initcategoryStackchart() {
      this.gyCategoryStackChart = this.$echarts.init(
        this.$refs.categoryStackchart
      );
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["1人间", "2人间", "4人间", "6人间", "8人间"],
        },
        series: [
          {
            name: "已租赁",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 20,
            itemStyle: {
              color: "#376df7",
            },
            emphasis: {
              focus: "series",
            },
            data: [20, 32, 31, 33, 39],
          },
          {
            name: "已使用",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 20,
            itemStyle: {
              color: "#6750aa",
            },
            emphasis: {
              focus: "series",
            },
            data: [12, 13, 10, 13, 9],
          },
          {
            name: "空置",
            type: "bar",
            stack: "total",
            label: {
              show: true,
              color: "#fff",
            },
            barWidth: 15,
            itemStyle: {
              color: "#53b997",
            },
            emphasis: {
              focus: "series",
            },
            data: [22, 18, 19, 23, 29],
          },
        ],
      };
      this.gyCategoryStackChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-right {
  width: 308px;
  margin-right: 25px;
  margin-top: -10px;
  position: relative;
  .map-right-asset {
    position: absolute;
    top: 36px;
    left: -65px;
    .asset-item {
      width: 65px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 14px;
      background: rgba(25, 73, 186, 0.7);
      box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
      color: #fff;
      margin-bottom: 5px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      cursor: pointer;
    }
    .active {
      background: rgba(15, 24, 45, 0.7);
      color: #fff;
      width: 80px;
      margin-left: -15px;
    }
  }
  .map-right-title {
    width: 100%;
    height: 38px;
    img {
      width: 100%;
    }
  }
  .map-right-content {
    width: 100%;
    height: calc(100vh - 235px);
    overflow-y: auto;
    background: rgba(15, 24, 45, 0.7);
    border-radius: 8px 8px 8px 8px;
    // border: 2px solid;
    // opacity: 0.9;
    // border-image: linear-gradient(
    //     117deg,
    //     rgba(255, 244, 47, 1),
    //     rgba(255, 244, 47, 0)
    //   )
    //   2 2;

    .big-title {
      display: flex;
      align-items: flex-start;
      padding-top: 15px;
      padding-left: 15px;
      font-size: 16px;
      font-weight: 600;
      img {
        width: 16px;
        margin-right: 10px;
      }
      p {
        font-weight: 600;
        font-size: 18px;
        color: #ffffff;
        line-height: 21px;
        padding-left: 10px;
      }
    }
    .swiper {
      width: 95%;
      margin: 13px auto 0;
      border-radius: 5px;
    }
    .swiper-info {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .swiper-info-item {
        width: 90%;
        color: #fff;
        text-align: left;
        padding-top: 5px;
        padding-left: 20px;
        dt {
          font-size: 18px;
          line-height: 28px;
        }
        dd {
          font-size: 14px;
          line-height: 16px;
          background: linear-gradient(
            90deg,
            rgba(31, 104, 246, 0) 0%,
            rgba(31, 104, 246, 0.19510000000000002) 100%
          );
          width: 40%;
          margin: 0;
        }
      }
    }
    .steet {
      padding-left: 21px;
      .steet-info {
        display: flex;
        align-items: center;
        padding-top: 22px;
        p {
          font-size: 16px;
          &:nth-child(1) {
            color: #1b213b;
          }
          &:nth-child(2) {
            color: #fff;
          }
        }
      }
      .steet-info-long {
        padding-top: 22px;
        p {
          font-size: 16px;
          &:nth-child(1) {
            color: #1b213b;
          }
          &:nth-child(2) {
            color: #fff;
          }
        }
      }
    }
  }
  .contact {
    display: flex;
    align-items: center;
    padding: 15px;
    .contact-left {
      padding-right: 15px;
    }
    .contact-right {
      color: #ffffff;
      font-size: 20px;
      p {
        &:nth-child(2) {
          padding-top: 15px;
        }
      }
    }
  }
  // .list-table {
  //   width: 100%;
  //   margin-bottom: 15px;
  //   table {
  //     width: 98%;
  //     margin: 0 auto;
  //     color: #fff;
  //     font-size: 11px;
  //     .list-info {
  //       width: 100%;
  //       height: 300px;
  //       overflow-y: auto;
  //       tr {
  //         width: 100%;
  //       }
  //       td {
  //         &:nth-child(1) {
  //           width: 16%;
  //         }
  //         &:nth-child(2) {
  //           width: 23%;
  //         }
  //         width: 22%;
  //         height: 24px;
  //         line-height: 24px;
  //       }
  //     }
  //     .list-header {
  //       width: 100%;
  //       background: #0064c8;
  //       tr {
  //         width: 100%;
  //       }
  //       th {
  //         &:nth-child(1) {
  //           width: 16%;
  //         }
  //         &:nth-child(2) {
  //           width: 23%;
  //         }
  //         width: 22%;
  //         height: 24px;
  //         line-height: 24px;
  //       }
  //     }

  //   }
  // }
}
</style>
<style lang="scss">
.list-table {
  width: 98%;
  margin: 0 auto;
  .el-table {
    background: transparent;
    &::before {
      background-color: transparent;
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background: transparent;
  }
  .el-table tr {
    color: #fff;
    font-size: 11px;
    &:hover {
      // background: transparent !important;
    }
    &:nth-child(2n-1) {
      background: #1b213b;
    }
    &:nth-child(2n) {
      background: #30385a;
    }
  }
  .el-table th {
    background: #0064c8 !important;
    height: 18px !important;
    line-height: 18px !important;
    color: #fff !important;
    padding: 0 !important;
  }
  .el-table td {
    border-bottom: none !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0;
  }
  .el-table th.is-leaf {
    border-bottom: none;
  }
}
</style>
